<label for="Headline">
  <span class="text-sm font-medium text-gray-700"> Headliner </span>

  <div class="relative">
    <input
      type="text"
      id="Headline"
      list="HeadlineList"
      placeholder="Please select"
      class="mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0"
    />

    <span class="absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
      </svg>
    </span>
  </div>

  <datalist name="Headline" id="HeadlineList">
    <option value="JM">John Mayer</option>
    <option value="SRV">Stevie Ray Vaughn</option>
    <option value="JH">Jimi Hendrix</option>
    <option value="BBK">B.B King</option>
    <option value="AK">Albert King</option>
    <option value="BG">Buddy Guy</option>
    <option value="EC">Eric Clapton</option>
  </datalist>
</label>
